<!--
 * @Author: zhoulei0232
 * @Date: 2022-12-08 00:37:02
 * @LastEditTime: 2023-01-17 21:17:07
 * @LastEditors: zhoulei0232
 * @Description: 
-->
<template>
  <div class="app-container">
    <el-upload
      class="avatar-uploader"
      action="http://127.0.0.1:7001/api/uploadCos/goods"
      :show-file-list="false"
      :before-upload="beforeAvatarUpload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
  </div>
</template>

<script setup name="Rules">
import Editor from "@/components/QuillEditor/index.vue";

import { listRules, updateRules, detailsRules } from "@/api/business/rules";
import {
  listOrder,
  addOrder,
  addOrderList,
  updateOrder,
  deleteOrder,
  detailsOrder,
} from "@/api/business/order";
import { Plus } from "@element-plus/icons-vue";
import { addUser } from "@/api/business/user";
import { ElMessage } from "element-plus";

const imageUrl = ref("");

const { proxy } = getCurrentInstance();
const pageList = ref([]);
const loading = ref(true);

const activeName = ref("1");
const data = reactive({
  tabJson1: {
    // 店铺规则
    rules_id: 1,
    rules_name: "店铺规则",
    txt: "",
  },
  tabJson2: {
    // 加装规则
    rules_id: 2,
    rules_name: "加装规则",
    txt: "",
  },
});
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== "image/png") {
    ElMessage.error("Avatar picture must be PNG format!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("Avatar picture size can not exceed 2MB!");
    return false;
  }
  return true;
};

const { tabJson1, tabJson2 } = toRefs(data);
// 提交
function handleSubmit() {
  if (activeName.value == 1) {
    updateRules(data.tabJson1).then((response) => {
      proxy.$modal.msgSuccess("修改成功");
      getList();
    });
  } else {
    updateRules(data.tabJson2).then((response) => {
      proxy.$modal.msgSuccess("修改成功");
      getList();
    });
  }
}
/** 查询列表 */
function getList() {
  loading.value = true;
  listRules().then((response) => {
    pageList.value = response.data;
    // 渲染数据用
    renderData();
    loading.value = false;
  });
}
/** 数据细分 */
function renderData() {
  pageList.value.forEach((item) => {
    if (item.rules_id == 1) {
      data.tabJson1 = {
        ...data.tabJson1,
        ...item,
      };
    } else if (item.rules_id == 2) {
      data.tabJson2 = {
        ...data.tabJson2,
        ...item,
      };
    }
  });
}
/** 查询列表 */
function getList11() {
  detailsRules({
    rules_name: "店铺规则",
  }).then((response) => {});
}
/** 查询列表 */
function getList22() {
  detailsOrder("03974735011222").then((response) => {});
}
/** 查询列表 */
function getList33() {
  addUser({
    username: "444589",
    password: "123",
    platformList: [
      {
        platformId: 1,
        nickName: "弟弟得", // 用户昵称
      },
    ],
  }).then((response) => {});
}

// getList();
// getList11();
getList22();
// getList33();
</script>
<style lang="scss" scoped>
.mb8 {
  margin-top: 20px;
}
</style>
